---
gid: 0a204bfa-9200-42e6-bf8a-3097c94a5c64
title: About Storefront MCP
description: Build AI shopping experiences with Storefront MCP and Model Context Protocol (MCP).
template: landing_page
feature_flag: mcp_dev_docs
---

<HeroSection
  title="Storefront MCP"
  lightImage="/assets/landing-pages/apps/build-page/mcp-hero-light.png"
  darkImage="/assets/landing-pages/apps/build-page/mcp-hero-dark.png"
  backgroundColor="blue"
  ctaButtons={(
    <IconCard
      iconSize="medium"
      variant="elevated"
      iconLocation="left"
      title="Start building now"
      image="/assets/icons/48/integration.png"
      darkImage="/assets/icons/48/integration-dark.png"
      padding="small"
      maxWidth
      href="/docs/apps/build/storefront-mcp/build-storefront-ai-agent"
    >
      Build an AI shopping agent with MCP
    </IconCard>
  )}
>
  Connect any AI assistant to real-time commerce data from Shopify stores with Model Context Protocol (MCP) servers. Help customers search, ask, and buy in natural language.
</HeroSection>

<Section>
  <h2>Model Context Protocol</h2>
  <div>
    <p>The [Model Context Protocol (MCP)](https://modelcontextprotocol.io/introduction) standardizes how applications provide context to AI models. It creates a consistent way for AI systems to access Shopify's commerce data and features.</p>
    
    <p>MCP uses a client-server architecture:</p>
    <ul>
      <li><strong>MCP client:</strong> Your [Shopify app](/docs/apps/build/build) that connects with AI models and passes their requests to MCP servers.</li>
      <li><strong>MCP servers:</strong> API endpoints that provide structured access to Shopify's commerce data, such as products, cart operations, and customer information.</li>
      <li><strong>Chat UI:</strong> A [Shopify theme extension](/docs/apps/build/online-store/theme-app-extensions/build) that shows a customer-facing chat window.</li>
    </ul>
    <p>The backend works as an MCP client while the frontend (Chat UI) provides the customer experience. This approach lets you connect any AI model to Shopify without custom integration.</p>
  </div>
</Section>

<Surface backgroundColor="cyan">
  <Section>
    <SectionLayout columns={2}>
      <SectionLayout.Column span={1} alignment="center">
        <h2>Benefits of MCP</h2>
        <p>Build AI shopping experiences that convert browsers into buyers:</p>
        
        <h3>MCP capabilities</h3>
        <ul>
          <li><strong>Product discovery:</strong> Natural-language search with product recommendations</li>
          <li><strong>Cart management:</strong> Create carts, add or remove items, and complete checkout</li>
          <li><strong>Store information:</strong> Answer questions about policies, shipping, returns, and FAQs</li>
          <li><strong>Order management:</strong> Track order status and process returns</li>
        </ul>
        
        <div style={{ marginBottom: "2rem" }}></div>
        
        <h3>App features</h3>
        <ul>
          <li><strong>AI-powered chat:</strong> Add an embedded chat bubble for real-time shopping help</li>
          <li><strong>Built-in MCP client:</strong> Connect to Shopify's tools for search, cart, and orders</li>
          <li><strong>Persistent context:</strong> Keep conversations coherent by remembering past messages</li>
          <li><strong>Custom chat UI:</strong> Style your theme extension to match your store's brand</li>
          <li><strong>Streaming responses:</strong> Create a natural chat experience with message streaming</li>
        </ul>
      </SectionLayout.Column>
      <SectionLayout.Column span={1}>
        <div style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100%" }}>
          <img 
            src="/assets/apps/storefront-mcp/mcp_chatbot.png" 
            alt="Illustration of a chatbot assistant with a Shopify storefront" 
            width="500"
            style={{ maxWidth: "100%", borderRadius: "15px" }}
          />
        </div>
      </SectionLayout.Column>
    </SectionLayout>
  </Section>
</Surface>

<Section>
  <h2>MCP servers</h2>
  
  <p>Connect to these MCP servers to extend your AI assistant's capabilities:</p>

  <Grid columns={2}>
    <IconCard
      iconSize="medium"
      variant="elevated"
      iconLocation="left"
      title="Storefront MCP server"
      image="/assets/icons/48/products-api.png"
      darkImage="/assets/icons/64/products-api-dark.png"
      href="/docs/apps/build/storefront-mcp/servers/storefront"
    >
      Connect to a store's catalog, cart, and policies to help customers shop with that merchant.
    </IconCard>
    <IconCard
      iconSize="medium"
      variant="elevated"
      iconLocation="left"
      title="Customer accounts MCP server"
      image="/assets/icons/48/store-management.png"
      darkImage="/assets/icons/64/store-management-dark.png"
      href="/docs/apps/build/storefront-mcp/servers/customer-account"
    >
      Help customers track orders, manage returns, and access their account information.
    </IconCard>
  </Grid>
</Section>

<Surface backgroundColor="blue" backgroundPosition="bottom left" backgroundSize="contain">
  <Section>
    <SectionLayout columns={3}>
      <SectionLayout.Column span={1} alignment="auto">
        <h2>Explore MCP</h2>
        <p>Dive deeper with these resources to accelerate development:</p>
      </SectionLayout.Column>
      <SectionLayout.Column span={2}>
        <Grid columns={2}>
          <a href="/docs/apps/build/storefront-mcp/build-storefront-ai-agent" style={{ display: 'block', textDecoration: 'none', border: 'none', borderBottom: 'none', boxShadow: 'none' }}>
            <CompactCard heading="h4" title="Build a Storefront AI agent">Follow this tutorial to create an AI shopping assistant</CompactCard>
          </a>
          <a href="https://github.com/Shopify/dev-mcp" style={{ display: 'block', textDecoration: 'none', border: 'none', borderBottom: 'none', boxShadow: 'none' }}>
            <CompactCard heading="h4" title="Shopify/dev-mcp server">Use the dev-mcp server to interact with Shopify Dev docs and Admin API</CompactCard>
          </a>
        </Grid>
      </SectionLayout.Column>
    </SectionLayout>
  </Section>
</Surface>